<!--
author: 何其沆(pooky)
desc: Admin - Others - Statistics - Project Details
data: 2022-03-31
-->
<template>
  <div class="project-details">
    <Search @search="handleSearch">
      <div style="display: flex">
        <SearchInput searchText="From">
          <a-date-picker
            :format="dateFormat"
            :disabled-date="disabledDate"
            v-model:value="fromTime"
            :allowClear="false"
          />
        </SearchInput>
        <SearchInput searchText="To">
          <a-date-picker
            :format="dateFormat"
            :disabled-date="disabledDate"
            v-model:value="toTime"
            :allowClear="false"
          />
        </SearchInput>
      </div>
    </Search>
    <e-container style="margin-top: 24px">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'projectProcess'">
              <div style="display: flex">
                <div v-if="record.projectStarted" class="tag">
                  <span class="icon icon-icon_Yes"></span>
                  <span>Started</span>
                </div>
                <div v-else class="tag">
                  <span class="icon icon-icon_No"></span>
                  <span class="no-color">Started</span>
                </div>
                <div v-if="record.projectInvoiced" class="tag">
                  <span class="icon icon-icon_Yes"></span>
                  <span>Invoiced</span>
                </div>
                <div v-else class="tag">
                  <span class="icon icon-icon_No"></span>
                  <span class="no-color">Invoiced</span>
                </div>
                <div v-if="record.projectDelivered" class="tag">
                  <span class="icon icon-icon_Yes"></span>
                  <span>Delivered</span>
                </div>
                <div v-else class="tag">
                  <span class="icon icon-icon_No"></span>
                  <span class="no-color">Delivered</span>
                </div>
                <div v-if="record.projectPaid" class="tag">
                  <span class="icon icon-icon_Yes"></span>
                  <span>Paid</span>
                </div>
                <div v-else class="tag">
                  <span class="icon icon-icon_No"></span>
                  <span class="no-color">Paid</span>
                </div>
              </div>
            </template>
            <template v-if="column.key === 'projectAmount'">
              <span
                >{{ record.currencyName }}
                {{ record.projectAmount ? Number(record.projectAmount).toFixed(2) : '0.00' }}</span
              >
            </template>
            <template v-if="column.key === 'amountInvoiced'">
              <span
                >{{ record.currencyName }}
                {{ record.amountInvoiced ? Number(record.amountInvoiced).toFixed(2) : '0.00' }}</span
              >
            </template>
            <template v-if="column.key === 'amountReceived'">
              <span
                >{{ record.amountReceived ? record.currencyName : '' }}
                {{ record.amountReceived ? Number(record.amountReceived).toFixed(2) : '' }}</span
              >
            </template>
          </template>
          <template #emptyText>
            <e-empty />
          </template>
        </a-table>
      </a-spin>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'

import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search2.vue'
import SearchInput from '../../components/SearchInput.vue'
import pageColumns from '@/assets/script/page_columns.js'
import statistics from '@/api/statistics'

const projectDetails = pageColumns.projectDetails
const columns = reactive(projectDetails)
const data = ref([])
const loading = ref(false)

const oDate = new Date()
const oYear = oDate.getFullYear()
const oMonth = oDate.getMonth() + 1 < 10 ? '0' + (oDate.getMonth() + 1) : '' + (oDate.getMonth() + 1)
const cDay = oDate.getDate() < 10 ? '0' + oDate.getDate() : '' + oDate.getDate()
const cDate = oMonth + '/' + cDay + '/' + oYear
const fromTime = ref(dayjs(cDate).subtract(3, 'month'))
const toTime = ref(dayjs(cDate))
const dateFormat = 'MM/DD/YYYY'

const timeArr = reactive({
  yearArr: [],
  monthArr: []
})

statistics.getInvoiceNumberYear().then(res => {
  if (res.code === 2000) {
    timeArr.yearArr = res.data
  }
})
statistics.getInvoiceNumberMonth().then(res => {
  if (res.code === 2000) {
    timeArr.monthArr = res.data
  }
})
const disabledDate = current => {
  return (
    dayjs(current).format('YYYY') < timeArr.yearArr[0] ||
    dayjs(current).format('YYYY') > timeArr.yearArr[timeArr.yearArr.length - 1]
  )
}

/**
 * 搜索
 */
const handleSearch = () => {
  getList()
}
/**
 * 获取数据列表
 * @returns {Promise<void>}
 */
const getList = () => {
  loading.value = true
  statistics
    .getAdminProjectDetails({
      isInvoiced: true,
      fromDate: dayjs(fromTime.value).format('YYYY-MM-DD'),
      toDate: dayjs(toTime.value).format('YYYY-MM-DD')
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 切换页码
 * @param value
 */
const changeSize = value => {
  current.value = value
}
/**
 * 初始化
 */
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
.tag {
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.no-color {
  color: #bfbfbf;
}
.icon {
  margin-right: 2px;
}
</style>
<route lang="yaml">
name: Project Details
path: '/statistics-m/project-details'
meta:
  sort: 2
</route>
